<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .fly>p{
            margin: 0;
            padding: 0.5em 0;
            /*【1】传统习惯，会让段落p之间有一个空行“1em”间隔，然后可以插入boder间隔*/
            border-bottom: solid blue 3px;
        }
        .sky{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .moon{
            padding: 10%;
            /*【2】也是参照父元素的宽度width。*/
            background-color: yellow;

        }
    </style>
</head>
<body>
<div class="fly">
    <p>this is a palce action why we have to use padding</p>
    <p>this is a palce action why we have to use padding</p>
    <p>this is a palce action why we have to use padding</p>
    <p>this is a palce action why we have to use padding</p>
</div>
<div class="sky">
    <p class="moon">1234</p>
</div>
</body>
</html>